<template>
  <el-form ref="form" label-width="120px" label-position="left">
    <el-form-item label="系统登录密码：">
      <span>******</span>
      <span class="ml20 pointer" style="color:#1C42C8"  @click="openUpdatePassword">重设密码</span>
      <span class="ml20 primary-color">首次登录密码未重设，建议重新设置</span>
    </el-form-item> 
    <el-form-item label="账号绑定邮箱：">
      <span>18312458205@139.com</span>
      <span class="ml20 pointer" style="color:#1C42C8" @click="openUpdateEmail">更改邮箱</span>
      <!-- <span class="ml20 pointer" style="color:#1C42C8" @click="openSetEmail">绑定邮箱</span> -->
    </el-form-item>
    <!-- 重设密码 -->
    <UpdatePassword :key="`UpdatePassword${autoKey}`" @close="autoKey++" ref="UpdatePassword"></UpdatePassword>
    <!-- 更改邮箱 -->
    <UpdateEmail :key="`UpdateEmail${autoKey}`" @close="autoKey++" ref="UpdateEmail"></UpdateEmail>
    <!-- 绑定邮箱 -->
    <SetEmail :key="`SetEmail${autoKey}`" @close="autoKey++" ref="SetEmail"></SetEmail>
  </el-form>
</template>

<script>
import { updateUserProfile } from "@/api/system/user";
import UpdatePassword from './updatePassword.vue'
import UpdateEmail from './updateEmail.vue'
import SetEmail from './setEmail.vue'

export default {
  components: {
    UpdatePassword,
    UpdateEmail,
    SetEmail
  },
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      autoKey: 0
    };
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserProfile(this.user).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    openUpdatePassword() {
      this.$refs.UpdatePassword.showModal()
    },
    openUpdateEmail() {
      this.$refs.UpdateEmail.showModal()
    },
    openSetEmail() {
      this.$refs.SetEmail.showModal()
    },
  }
};
</script>
